<template>
  <div class="ac-page">
    <div class="top">
      <Navbar :title="navTitle" />

      <div class="banner">
        <div>
          <TmpChart unit="temp" :val="temp" @emitChartVal="tempEmitChartVal" />
        </div>
        <div>
          <TmpChart unit="humidity" :val="humidity" @emitChartVal="hEmitChartVal" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">模式</div>
      <div class="mode">
        <van-tabs v-model:active="currentMode" @change="handleModeChange">
          <van-tab v-for="item in acModeItems" :key="item.id">
            <template #title>
              <div class="tab-item">
                <SvgIcon
                  :iconName="item.svg"
                  :color="currentMode === item.id ? '#fff' : 'var(--primary-text-color)'"
                  size="25px"
                />
                <div class="title">{{ item.title }}</div>
              </div>
            </template>
          </van-tab>
        </van-tabs>
      </div>
      <div class="action">
        <div class="item" @click="statusShow = true">
          <div class="left">
            <div class="title">空调状态</div>
            <div class="description">正压</div>
          </div>
          <div class="right">
            <SvgIcon iconName="s9" color="#D7E5FC" size="12px" />
          </div>
        </div>
        <div class="item">
          <div class="left">
            <div class="title">空调主机</div>
            <div class="description">开启</div>
          </div>
          <div class="right">
            <van-switch v-model="mainStatus" @change="handleSwitchChange" size="22px" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @click="toMachinePage"><div>点击进入</div></div>
  </div>
  <!-- attention -->
  <div class="status-pop">
    <van-popup v-model:show="statusShow" round position="bottom">
      <div class="attention">
        <SvgIcon iconName="attention" color="#D7E5FC" size="13px" />
        <span>“新风”适用于门急诊、常规实验室、普通病房</span>
      </div>
      <van-picker
        v-model="status"
        title="空调状态"
        confirm-button-text="确定"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar.vue'
import TmpChart from '@/components/AC/TmpChart.vue'
import { acModeItems, acStateItems } from '@/utils/enum.js'
import { ref, reactive, watch } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

import { useRouter } from 'vue-router'
import { sendToNative_sendUartData } from '@/utils/base.js'
import { verifySum, numToHex } from '@/utils/utils.ts'
const router = useRouter()

const navTitle = ref('空调机组设置')

const statusShow = ref(false)
const columns = reactive(acStateItems())

// 空调温度
const temp = ref<number>(16)
// 空调湿度
const humidity = ref<number>(0)
// 模式
const currentMode = ref<number>(0)
// 状态
const status = ref<number[]>([1])
// 主机开关
const mainStatus = ref<boolean>(false)
const mainText = ref<string>('关闭')
const mainTextArr: string[] = ['关闭', '开启']

// 初始化数据
const init = () => {
  console.log('init==')
  const info = store.state.deviceInfo
  console.log(info, 'info')
  const { acTemp, acHumidity, acMode, acStatus, acMain } = info
  temp.value = acTemp
  humidity.value = acHumidity
  currentMode.value = acMode
  status.value = [acStatus]
  mainStatus.value = acMain ? true : false
  mainText.value = mainTextArr[acMain]
}
init()

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)

const toMachinePage = () => {
  router.push({ path: '/machine' })
}

const tempEmitChartVal = (val: number) => {
  temp.value = val
  const data = numToHex(val)
  const sum = verifySum(`0204001C01${data}`)
  const hex = `F1F10204001C01${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
const hEmitChartVal = (val: number) => {
  humidity.value = val
  const data = numToHex(val)
  const sum = verifySum(`0204001D01${data}`)
  const hex = `F1F10204001D01${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
const handleModeChange = (mode: number) => {
  console.log(mode, 'item')
  const data = numToHex(mode)
  const sum = verifySum(`0204001B01${data}`)
  const hex = `F1F10204001B01${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
const onConfirm = ({ selectedOptions }: any) => {
  console.log(selectedOptions, 'selectedOptions')
  const { text, value } = selectedOptions[0]
  console.log(text)
  console.log(value)
  mainText.value = text
  const data = numToHex(value)
  const sum = verifySum(`0204001F01${data}`)
  const hex = `F1F10204001E01${data}${sum}7E`
  sendToNative_sendUartData(hex)
  statusShow.value = false
}

const onCancel = () => (statusShow.value = false)
const handleSwitchChange = (val: any) => {
  console.log(val, mainStatus.value, 'val')
  mainText.value = val ? '开启' : '关闭'
  const data = val ? '01' : '00'
  const sum = verifySum(`0204001F01${data}`)
  const hex = `F1F10204001F01${data}${sum}7E`
  sendToNative_sendUartData(hex)
}
</script>
<style lang="less" scoped>
@import url(../assets/style/ac.less);
</style>
